<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      ul,
      ol {
        list-style: none;
      }
      .banner {
        position: relative;
        width: 880px;
        height: 550px;
        /* border: 1px solid #777; */
        margin: 50px auto;
      }
      .pic li {
        width: 880px;
        height: 550px;
        display: none;
        position: absolute;
        top: 0;
        left: 0;
      }
      .pic li img {
        width: 100%;
        height: 100%;
        display: block;
      }
      .pic li.current {
        display: block !important;
      }
      .btn {
        width: 100%;
        height: 80px;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        /* background-color: skyblue; */
        z-index: 6;
      }
      .btn a {
        height: 80px;
        width: 80px;
        float: left;
        margin-left: 10px;
        line-height: 80px;
        background-color: rgba(255, 255, 255, 0.3);
        color: #444;
        font-size: 60px;
        font-family: 'SimSun';
        text-align: center;
        text-decoration: none;
      }
      .btn .rbtn {
        float: right;
        margin-right: 10px;
      }
      .btn a:hover {
        background-color: rgba(255, 255, 255, 0.5);
      }
      .ol {
        width: 200px;
        height: 40px;
        position: absolute;
        bottom: 30px;
        left: 50%;
        z-index: 7;
        transform: translateX(-50%);
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 20px;
      }
      .ol li {
        width: 20px;
        height: 20px;
        float: left;
        margin: 10px;
        background-color: #ccc;
        border-radius: 50%;
        cursor: pointer;
      }
      .ol li.current {
        background-color: #0ff;
      }
    </style>
  </head>
  <body>
    <div class="banner" id="banner">
      <ul class="pic" id="pic">
        <li class="current"><img src="./image/lunbo/01.jpg" alt="" /></li>
        <li><img src="./image/lunbo/02.jpg" alt="" /></li>
        <li><img src="./image/lunbo/03.jpg" alt="" /></li>
        <li><img src="./image/lunbo/04.jpg" alt="" /></li>
        <li><img src="./image/lunbo/05.jpg" alt="" /></li>
      </ul>
      <div class="btn">
        <a href="javascript:;" class="lbtn" id="lbtn">&lt;</a>
        <a href="javascript:;" class="rbtn" id="rbtn">&gt;</a>
      </div>
      <ol class="ol" id="ol">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </div>
    <script>
      //1.获取元素
      var banner = my$('banner') //轮播图容器
      var pic = my$('pic') //图片容器
      var ulist = pic.children //图片li标签集合
      var ol = my$('ol') //切换li标签容器
      var olist = ol.children //切换圆点集合
      var lbtn = my$('lbtn') //左边按钮
      var rbtn = my$('rbtn') //右边按钮
      //2.定义全局变量
      var index = 0 //选中轮播图的索引，默认为0
      var timer //全局存储定时器变量
      //3.左右按钮点击事件
      lbtn.onclick = leftHandle
      rbtn.onclick = rightHander
      //4.点击圆点切换轮播图
      ol.onclick = function (event) {}
      //5.自动轮播
      aotoPlay()
      //6.鼠标移动到轮播图停止轮播，鼠标离开轮播图继续轮播
      banner.onmouseenter = clearTimer
      banner.onmouseleave = aotoPlay
      //左切换处理事件
      function leftHandle() {
        index--
        if (index < 0) {
          index = ulist.length - 1
        }
        change()
      }
      //右切换处理事件
      function rightHander() {
        index++
        if (index >= ulist.length) {
          index = 0
        }
        change()
      }
      //切换
      function change() {
        for (var i = 0; i < ulist.length; i++) {
          ulist[i].className = ''
          olist[i].className = ''
        }
        ulist[index].className = 'current'
        olist[index].className = 'current'
      }
      //自动轮播
      function aotoPlay() {
        timer = setInterval(rightHander, 2000)
      }
      //停止自动轮播
      function clearTimer() {
        clearInterval(timer)
      }
      //通过id获取元素
      function my$(id) {
        return document.getElementById(id)
      }
    </script>
  </body>
</html>
